<template>
  <div class="test">
    <div class="top-fixed">
      <x-header :left-options="{ backText: '' }">
        <header-title :title="$t('home.notice')" />
        <a slot="right" @click="showEditMessage=true">
          <img class="add" src="@/assets/notice/add.png" >
        </a>
      </x-header>
    </div>

    <div class="content">
      <mescroll-vue
        ref="mescroll"
        :down="mescrollDown"
        :up="mescrollUp"
        @init="mescrollInit"
      >
        <swipeout v-for="(item, index) in noticeList" :key="index">
          <swipeout-item :threshold="0.5" underlay-color="#ccc">
            <div slot="right-menu">
              <swipeout-button
                background-color="#D23934"
                @click.native="cancelNotice(item.id, index)"
              >
                {{ $t('notice.delete') }}
              </swipeout-button>
            </div>
            <div
              slot="content"
              class="demo-content vux-1px-tb"
              @click="goDetails(item)"
            >
              <div class="titleImg">{{ $t('home.notice') }}</div>
              <div class="notice-box">
                <p class="title">{{ item.title }}</p>
                <p class="notice-content">{{ item.content }}</p>
              </div>
              <div class="clearfix" />
              <span class="time">{{ item.createTime }}</span>
              <span v-show="item.forwardUserId" class="forward">{{
                $t('home.forward')
              }}</span>
            </div>
          </swipeout-item>
        </swipeout>
      </mescroll-vue>
    </div>

    <div v-if="!noticeList.length" class="no-data">
      <img src="@/assets/notice/empty.png" alt="" >
      <p>{{ $t('notice.noNotices') }}</p>
    </div>
    <actionsheet
      v-model="showEditMessage"
      :menus="noticeMenu"
      :cancel-text="$t('common.cancel')"
      show-cancel
      @on-click-menu="click"
    />
  </div>
</template>

<script>
import {
  ButtonTab,
  ButtonTabItem,
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Confirm,
  Toast,
  XHeader,
  Actionsheet,
} from 'vux';
import { mapState } from 'vuex';
import HeaderTitle from '@/components/common/HeaderTitle';
import MescrollVue from 'mescroll.js/mescroll.vue';
import { mescroll } from '@/common/minxins';
import {
  getMessagesList,
  deleteMessages,
} from '@/api/message';

export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Confirm,
    Toast,
    XHeader,
    HeaderTitle,
    Actionsheet,
    MescrollVue,
  },
  mixins: [mescroll],
  data() {
    return {
      tabbarIndex: 0,
      noticeList: [], // 存储接收的消息
      showConfirm: false,
      locale: true, // 默认显示中文
      totalPage: 0,
      page: 1,
      size: 20,
      showEditMessage: false,
    };
  },
  computed: {
    ...mapState(['me']),
    noticeMenu() {
      return {
        commonNotice: this.$t('notice.commonNotice'),
        templateNotice: this.$t('notice.templateNotice'),
      };
    },
  },
  created() {
    this.getNoticesList();
  },
  methods: {
    // 获取消息列表
    async getNoticesList() {
      const messageList = await getMessagesList({
        page: this.page,
        size: this.size,
      });
      this.totalPage = Number(messageList.headers['x-total-page']);
      // 第一页把返回的值直接赋给列表，以防不断点击tab出现重复数据的问题
      if (this.page === 1) {
        this.noticeList = messageList.data;
      } else {
        this.noticeList.push(...messageList.data);
      }
      this.$nextTick(() => {
        this.mescroll.endSuccess(messageList.data.length);
      });
      this.noticeList.forEach((item) => {
        item.createTime = this.$moment(new Date(item.createTime)).format(
          'YYYY-MM-DD HH:mm'
        );
      });
      this.noticeList = this.unique(this.noticeList);
    },
    // 数组去重
    unique(arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].id === arr[j].id) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    // 进入详情页
    goDetails(item) {
      this.$router.push({
        path: '/messageDetail',
        query: {
          id: item.id,
        },
      });
    },
    // 删除通知
    async cancelNotice(id, index) {
      const result = await deleteMessages(id);
      if (result.status === 200) {
        this.$vux.toast.show({
          text: this.$t('home.cancelSuccess'),
        });
        this.noticeList.splice(index, 1);
        this.getNoticesList();
      }
    },
    // 进入编辑通知页面
    click(key) {
      if (key !== 'cancel') {
        this.$router.push({
          path: '/editMessage',
          query: {
            key,
          },
        });
      }
    },
    // 关闭应用
    onClose() {
      vrv.jssdk.closeView({});
    },
    // 初始化分页参数
    initPageParams() {
      this.noticeList = [];
      this.page = 1;
      this.totalPage = 0;
      this.mescrollUp.page.num = 0;
    },
    // 分页
    upCallback(page, mescroll) {
      this.page = page.num;
      const noMoreData = this.page > this.totalPage;
      if (!noMoreData) {
        this.getNoticesList();
      } else {
        this.$nextTick(() => {
          this.mescroll.endSuccess(this.noticeList.length);
        });
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 由于编辑页面有keepalive, 所以发布成功和转发成功跳转到首页需要重新获取列表
      if (
        from.path === '/editMessage' ||
        from.path === '/messageDetail' ||
        from.path === '/home'
      ) {
        vm.initPageParams();
        vm.getNoticesList();
      }
    });
  },
};
</script>

<style lang="less" scoped>
.mescroll {
  position: absolute;
  top: 47px;
  bottom: 0;
  height: auto;
}
.tabbar {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 30px 0;
  z-index: 100;
  border-bottom: 1px solid #e5e5e5;
}
.tabbar-box {
  width: 92%;
  margin: 0 auto;
}
.vux-button-group > a.vux-button-group-current {
  background: #3c7cfc;
}
.vux-button-group > a.vux-button-tab-item-first:after,
.vux-button-group > a.vux-button-tab-item-last:after {
  border: 1px solid #3c7cfc;
}
.demo-content {
  padding: 20px 30px 20px 30px;
  margin-top: -1px;
  margin-bottom: 1px;
}
.titleImg {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #3c7cfc;
  text-align: center;
  line-height: 88px;
  color: #fff;
  font-size: 26px;
  float: left;
}
.clearfix {
  clear: both;
}
.title {
  font-size: 28px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
  width: 60%;
}
.notice-box {
  width: 80%;
  float: left;
  margin-left: 20px;
}
.notice-content {
  font-size: 24px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  text-overflow: ellipsis;
  position: absolute;
  top: 74px;
  width: 64%;
}
.time {
  font-size: 24px;
  color: #666;
  position: absolute;
  top: 24px;
  right: 40px;
}
.forward {
  font-size: 24px;
  color: #999;
  position: absolute;
  top: 75px;
  right: 40px;
}
.notice {
  margin-bottom: 2px;
  background: #fff;
  padding: 30px;
  position: relative;
}
.add {
  width: 38px;
}
.no-data {
  margin-top: 160px;
  width: 100%;
}
.no-data img {
  display: block;
  width: 228px;
  margin: 0 auto;
}
.no-data p {
  text-align: center;
  margin-top: 20px;
  color: #999;
  font-size: 28px;
}
</style>
